<template>
    <p>Count: {{ count }}</p>
    <button @click="handleClick">Increment</button>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";

const route = useRoute();

const title = ref("parentToChild");

if (route.meta && route.meta.title) {
    title.value = route.meta.title as string;
}

const count = ref(0);

const handleClick = () => {
    count.value += 1;
};

// setup 中没有 this 可以直接使用
console.log(this); // undefined 

onBeforeMount(() => {
    console.log("onBeforeMount called");
});

// 重复的生命周期函数，可以重复，不会覆盖
onBeforeMount(() => {
    console.log("onBeforeMount called00000000000");
});

onMounted(() => {
    console.log("onMounted called");
});

onBeforeUpdate(() => {
    console.log("onBeforeUpdate called");
});

onUpdated(() => {
    console.log("onUpdated called");
});

onBeforeUnmount(() => {
    console.log("onBeforeUnmount called");
});

onUnmounted(() => {
    console.log("onUnmounted called");
});
</script>

<style scoped></style>
